<template>
  <div class="card-wrap flex-column justify-end card-padding">
    <el-form :model="form" ref="supplierInformation">
      <div class="card-title-wrap">
        <span>供应商信息</span>
        <span></span>
      </div>
      <!--供应商详情模块 -->
      <table-page border :isSelect="false" :dataList="form.supplieList" :total="total">
        <!-- 操作插槽 -->
        <template slot="tableColAc">
          <el-table-column label="操作" width="160px" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="text" @click="view(1, scope.row)">查看</el-button>
              <el-button type="text" v-if="scope.row.status == 4" @click="view(2, scope.row)">延期</el-button>
              <el-button type="text" v-if="Number(scope.row.totalFee) > Number(scope.row.amountPaid)" @click="view(3, scope.row)">申请付款</el-button>
            </template>
          </el-table-column>
        </template>
        <!-- 普通列插槽 -->
        <template slot="tableCol">
          <el-table-column label="供应商名称" align="center" prop="supplierName" min-width="150px" show-overflow-tooltip />
          <el-table-column label="授权期限(天)" align="center" prop="authorizationPeriod" width="100" />
          <el-table-column label="授权时间" align="center" min-width="180px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.authorizationStartTime }} 至 {{ scope.row.authorizationEndTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="已收车数" align="center" prop="numberOfVehiclesReceived" min-width="120px" show-overflow-tooltip />
          <el-table-column label="总费用(元)" align="center" prop="totalFee" min-width="120px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.totalFee) }} </span>
            </template>
          </el-table-column>
          <el-table-column label="已付款金额(元)" align="center" prop="amountPaid" min-width="120px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.amountPaid) }} </span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status" min-width="100px" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.outsourcing_supplier_status" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="申请时间" align="center" prop="createTime" min-width="120px" show-overflow-tooltip />
        </template>
      </table-page>
    </el-form>

    <!-- 添加或修改测试单表对话框 -->
    <el-dialog title="延期" :visible.sync="open" append-to-body class="form-dialog" width="35%">
      <div style="width: 90%; margin: 0 auto">
        <el-form ref="formDig" label-position="right" :model="formDig" label-width="100px" :rules="rules">
          <el-form-item label="供应商名称:">
            <span>{{ formDig.supplierName }}</span>
          </el-form-item>
          <el-form-item label="授权期限:">
            <span>{{ formDig.authorizationPeriod }}天</span>
          </el-form-item>
          <el-form-item label="授权日期:">
            <span>{{ formDig.authorizationStartTime }} 至 {{ formDig.authorizationEndTime }} </span>
          </el-form-item>
          <el-form-item label="延长天数:" prop="days">
            <el-input style="width: 60%" v-model="formDig.days" maxlength="11" @input="formDig.days = formDig.days.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1')" placeholder="请输入延长天数">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancelDig">取消</el-button>
        <el-button type="primary" @click="submitForm('formDig')">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { postpone, thereAreNoPayableCharges } from '@/api/pickUpTheCar'
export default {
  // 客户信息
  name: 'supplierInformationDetail',
  dicts: ['outsourcing_supplier_status'],
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
  },
  data() {
    return {
      total: 0,
      open: false,
      formDig: {},
      typeBtn: null,
      rules: {
        days: [
          {
            required: true,
            message: '请输入延长天数',
            trigger: 'change',
          },
        ],
      },
    }
  },
  created() {},
  methods: {
    // 按钮
    view(type, row) {
      this.typeBtn = type
      if (type == 1) {
        this._toPage({
          path: '/pickUpTheCar/receivingSupplierDetails',
          name: 'ReceivingSupplierDetails',
          query: {
            type: 'detail',
            id: row.id,
          },
        })
      } else if (type == 2) {
        this?.$refs['formDig']?.resetFields()
        this.open = true
        this.formDig = Object.assign({}, row)
      } else if (type == 3) {
        thereAreNoPayableCharges(row.id).then((res) => {
          if (res.data) {
            this._toPage({
              path: '/pickUpTheCar/applyForPayment',
              name: 'ApplyForPayment',
              query: {
                type: 'add',
                id: row.id,
                supplierId: row.supplierId,
              },
            })
          } else {
            this.$message({
              type: 'error',
              message: '暂无可付款费用，无法申请付款',
            })
          }
        })
      }
    },
    cancelDig() {
      this.open = false
    },
    submitForm(formName) {
      if (this.typeBtn == 2) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              days: this.formDig.days,
              supplierId: this.formDig.supplierId,
              backCarId: this.formDig.backCarId,
            }
            postpone(data)
              .then((res) => {
                this.$message({
                  message: '授权延期成功',
                  type: 'success',
                })
                this.open = false
                this.$emit('updateView')
              })
              .catch(() => {
                this.open = false
              })
          } else {
            return false
          }
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
